<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
import { onMounted, ref, Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { basicProps } from '../../../dashboard/Analysis/components/props';
import { defHttp } from '/@/utils/http/axios';
import { useRouter } from 'vue-router';

defineProps({
  ...basicProps,
});

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

 // 获取路由
const router = useRouter();
function queryYear(year) {
  console.log("选中的", year);
  // 拼接请求的 URL
  const url = `/utensil/labUtensilChecklist/queryMonth?selYear=${year}`;
  // 发起请求
  defHttp.get({ url }).then((result) => {
    console.log("xy轴值", result);
    setOptions({
      color: ['#FB8C74'],
      title: {
        text: '单位: 个',
        left: '22px',
        top: '1px',
        show: true,
      },
      textStyle: {
        color: '#A1A1A1',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            width: 1,
            color: '#019680',
          },
        },
      },
      grid: { left: '1%', right: '1%', top: '18  %', bottom: 0, containLabel: true },
      xAxis: {
        type: 'category',
        // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        data: result.xAxis,
        axisLine: {
          show: true, // 显示纵轴线
          lineStyle: {
            color: '#CDCDCD', // 设置纵轴线的颜色
          },
        },
      },
      yAxis: {
        type: 'value',
        max: 10,
        splitNumber: 5,
        axisLine: {
          show: true, // 显示纵轴线
          lineStyle: {
            color: '#CDCDCD', // 设置纵轴线的颜色
          },
        },
      },
      series: [
        {
          // data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
          data: result.yAxis,
          type: 'bar',
          barMaxWidth: 80,

        },
      ],
    });
  })
}

const currentDate = new Date();
const currentYear = currentDate.getFullYear();
console.log(currentYear); // 输出当前年份
  // 在当前页面加载时执行数据查询
  onMounted(() => {
    queryYear(currentYear); // 进入页面第一次渲染，执行数据查询
  });


defineExpose({

  queryYear,

});
</script>
